<template>
	<view class="extract">
		<uv-navbar placeholder autoBack bgColor="#CA1C1D">
			<template v-slot:left>
				<view class="left_slot">
					<image src="@/static/images/back.png"></image>
				</view>
			</template>
			<template v-slot:center>
				<view class="nav_title">提现</view>
			</template>
		</uv-navbar>
		<view class="content">
			<view class="item">
				<view class="head">提现金额</view>
				<view class="input_view">
					<input type="text" placeholder="请输入提现金额，最低100" v-model="money" class="input">
					<view class="unit">￥</view>
					<view class="all" @click="money=balance">全部</view>
				</view>
			</view>
			<view class="balance">可提现金额：{{balance}}</view>
			<!-- <view class="item">
				<view class="head">银行卡号</view>
				<view class="input_view">
					<input type="text" placeholder="已绑定银行卡：*******4548" disabled value="" class="input">
					<view class="look">查看</view>
				</view>
			</view> -->
			<view class="submit">
				<view @click="submit">提交</view>
			</view>
			<view class="parse_view">
				<view class="head">温馨提示:</view>
				<view>1.请确认您要转账的银行卡号是否正确，避免提现失败。</view>
				<view>2.最低提现金额为100元，提现申请审核处理时，不能再次提现。</view>
				<view>3.提现申请将在48小时内审核处理，请耐心等待。</view>
				<view>4.提现结果在钱包余额记录中查看提现状态，并到提现账户中核对。</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		withdrawal,
		withdrawalPost
	} from "@/request/api";
	import {
		ref
	} from "vue";

	const balance = ref("");
	const getDeta = async () => {
		let res = await withdrawal();
		balance.value = res.balance;
	};
	getDeta();

	const money = ref("");
	const submit = async () => {
		await withdrawalPost({
			money: money.value
		});
		uni.$uv.toast("操作成功");
	};
</script>

<style scoped lang="scss">
	.extract {
		min-height: calc(100vh - var(--window-top) - var(--window-bottom));
		padding: 0rpx 20rpx;
		box-sizing: border-box;
		overflow: hidden;

		.left_slot {
			image {
				width: 43rpx;
				height: 36rpx;
			}
		}

		.nav_title {
			color: #F5F5F5;
			font-size: 36rpx;
		}

		.content {
			padding: 10rpx 0;
			box-sizing: border-box;

			.item {
				.head {
					height: 76rpx;
					line-height: 76rpx;
					color: #333333;
					font-size: 28rpx;
				}

				.input_view {
					height: 110rpx;
					border-radius: 20rpx;
					border: 1px solid #CCCCCC;
					padding: 0 40rpx;
					box-sizing: border-box;
					background: #EEEEEE;
					display: flex;
					align-items: center;

					.input {
						flex: 1;
					}

					.unit {
						color: #333333;
						font-size: 36rpx;
						font-weight: bold;
						padding: 0 64rpx;
						box-sizing: border-box;
					}

					.all {
						color: #333333;
						font-size: 36rpx;
						font-weight: bold;
					}

					.look {
						color: #999999;
						font-size: 28rpx;
					}
				}
			}

			.balance {
				color: #999999;
				font-size: 28rpx;
				margin-top: 20rpx;
				padding-left: 10rpx;
				box-sizing: border-box;
			}

			.submit {
				margin-top: 55rpx;
				margin-bottom: 42rpx;
				padding: 0 10rpx;
				box-sizing: border-box;

				view {
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 28rpx;
					font-weight: bold;
					border-radius: 20rpx;
					background: #CA1C1D;
				}
			}

			.parse_view {
				padding: 0 10rpx;
				box-sizing: border-box;

				.head {
					color: #999999;
					font-size: 26rpx;
					font-weight: bold;
					margin-bottom: 18rpx;
				}

				view {
					line-height: 38rpx;
					color: #666666;
					font-size: 26rpx;
				}
			}
		}
	}
</style>